<template>
    <el-card shadow="never" class="d-card">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="供应商">
              <el-input v-model="formInline.user" placeholder="供应商编码"></el-input>
            </el-form-item>
            <el-form-item label="门店编码">
              <el-select v-model="formInline.region" placeholder="门店编码">
                  <el-option label="Zone one" value="shanghai"></el-option>
                  <el-option label="Zone two" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收货单">
              <el-input v-model="formInline.user" placeholder="收货单"></el-input>
            </el-form-item>
            <el-form-item label="凭证号">
              <el-input v-model="formInline.user" placeholder="凭证号"></el-input>
            </el-form-item>
            <el-form-item label="订单号">
              <el-input v-model="formInline.user" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="结算单">
              <el-input v-model="formInline.user" placeholder="结算单"></el-input>
            </el-form-item>
            <el-form-item label="支付单">
              <el-input v-model="formInline.user" placeholder="支付单"></el-input>
            </el-form-item>
            <el-form-item label="收货日期">
              <el-input v-model="formInline.user" placeholder="收货日期"></el-input>
            </el-form-item>
            <el-form-item label="订单类型" v-model="form.type">
              <el-select v-model="formInline.region" placeholder="订单类型">
                  <el-option label="Zone one" value="shanghai"></el-option>
                  <el-option label="Zone two" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="费用类型" v-model="form.type">
              <el-select v-model="formInline.region" placeholder="费用类型">
                  <el-option label="Zone one" value="shanghai"></el-option>
                  <el-option label="Zone two" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button >重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card shadow="never" class="d-card" style="margin-top: 10px;">
      <el-row style="height: 35;line-height: 35px;margin-bottom: 10px;">
        <el-col :span="12">
          <span class="d-main-table-title">收货单</span>
        </el-col>
        <el-col :span="12">
          <div style="float: right;">
            <el-button-group class="ml-4">
              <el-button type="primary" :icon="Plus" @click="showAddModal()">新建</el-button>
              <el-button type="success" :icon="Download" @click="alert('下载成功')"></el-button>
              <el-button type="warning" :icon="Upload" @click="alert('上传成功')"></el-button>
              <el-dropdown >
                <el-button type="primary">
                  更多操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>修改结算方式</el-dropdown-item>
                    <el-dropdown-item>修改结算公司</el-dropdown-item>
                    <el-dropdown-item>下载模板</el-dropdown-item>
                    <el-dropdown-item>导出明细</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-button-group>
          </div>
        </el-col>
      </el-row>
      <el-table :data="tableData" border stripe style="width: 100%;" height="745" :header-cell-style="{backgroundColor: '#F5F7FA'}" v-loading="tableLoading">
          <el-table-column fixed type="selection" width="35" />
          <el-table-column prop="date" label="供商编码" />
          <el-table-column prop="name" label="供商名称" />
          <el-table-column prop="address" label="收货单号" width="200" />
          <el-table-column prop="name" label="订单类型" />
          <el-table-column prop="name" label="订单来源" />
          <el-table-column prop="name" label="计费类型" />
          <el-table-column prop="name" label="计费名称" />
          <el-table-column prop="name" label="门店编码" />
          <el-table-column prop="name" label="门店名称" />
          <el-table-column prop="name" label="收货日期" />
          <el-table-column prop="name" label="库存凭证号" />
          <el-table-column prop="name" label="订单号" />
          <el-table-column prop="name" label="订单日期" />
          <el-table-column prop="name" label="含税金额" />
          <el-table-column prop="name" label="未税金额" />
          <el-table-column prop="name" label="税额" />
          <el-table-column prop="name" label="结算单号" />
          <el-table-column prop="name" label="结算公司" />
          <el-table-column prop="name" label="结算方式" />
          <el-table-column prop="name" label="是否冻结" />
          <el-table-column fixed="right" prop="name" label="操作" width="190">
            <template #default="scope">
              <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button @click="handleDetail(scope.$index, scope.row)">详情</el-button>
              <el-button @click="handleDelete(scope.$index, scope.row)" type="danger">删除</el-button>
            </template>
          </el-table-column>
      </el-table>
      <div style="float: right;margin-top: 20px;margin-bottom: 20px;">
        <el-pagination
          v-model:currentPage="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 新建弹出框 -->
    <EditFormModal 
      v-if="adminModal.render"
      :model="adminModal"
    />

    <!-- 列表详细弹出框 -->
    <DetailModal 
      v-if="detailModal.render"
      :model="detailModal"
    />

</template>

<script lang="ts" setup>
import { reactive, onMounted, ref, onBeforeMount, defineAsyncComponent, getCurrentInstance, resolveDynamicComponent } from 'vue'
import { Timer } from '@element-plus/icons-vue'
import { confirm, alert } from '../utils/widget'
import { ElMessage } from 'element-plus'

import { ajax } from '../utils/ajax';
import AdminModal from '../types/AdminModal';
import { copyReactive } from '../utils/objectUtils';

import {
  Plus,
  Download,
  Upload,
  ArrowDown
} from '@element-plus/icons-vue'
import { fa } from 'element-plus/lib/locale';

const EditFormModal = defineAsyncComponent(() => import('../layouts/components/admin/editFormModal.vue'));
const adminModal = reactive(new AdminModal());

const DetailModal = defineAsyncComponent(() => import('../layouts/components/admin/detailModal.vue'));
const detailModal = reactive(new AdminModal());

const formInline = reactive({
  user: '',
  region: '',
})

const onSubmit = () => {
  console.log('submit!')
}

const tableLoading = ref(false);

let tableData  = ref([]);
const getTableData = () => {
  tableLoading.value = true;
  ajax.get('/src/mock/userTableData.json', {}, (resp: any) => {
    tableData.value = resp.data;
    tableLoading.value = false;
  });
}

onMounted(() => {
  getTableData();
});

interface User {
  date: string
  name: string
  address: string
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row);
  const modelData = copyReactive(row);
  adminModal.show().setTitle(`编辑收货单 - ${modelData.name}`).setModalData(modelData);
}

const handleDelete = (index: number, row: User) => {
  confirm({
    title: '删除以后无法恢复！确认要删除吗？',
    confirmCallback: () => {
      console.log('user.name=' + row.name);
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
    }
  });
}

const handleDetail = (index: number, row: User) => {
  const modelData = copyReactive(row);
  detailModal.show().setTitle('收货单详情').setModalData(modelData);
}

const showAddModal = () => {
  adminModal.show().setTitle('添加收货单').setModalData({});
}

const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(true)
const background = ref(true)
const disabled = ref(false)

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
});


</script>